import { h, toRefs, watch } from "vue";
import funcUtils from "@/utils/func.js";
import { ElTag, ElButton, ElLink, ElInput, ElAvatar, ElImage } from "element-plus";
import Chart from "./chart.vue";
import https from "@/utils/https.js";

export default {
    props: {
        config: Object,
    },
    components: {
        ElTag,
        ElButton,
        ElLink,
        ElInput,
        ElAvatar,
        ElImage,
        Chart,
    },
    setup({ config }) {
        const template = ref(h("div", "未配置内容"));
        const reloadTemplate = () => {
            if (config && config.template) {
                funcUtils.callFunc(config.template, this, proxyH, { https }).then((resp) => {
                    template.value = resp;
                });
            }
        };

        // 代理h函数，以便可以使用ElTag等组件
        const proxyH = (type, props, children) => {
            if (type == "el-tag") {
                return h(ElTag, props, children);
            } else if (type == "el-button") {
                return h(ElButton, props, children);
            } else if (type == "el-link") {
                return h(ElLink, props.children);
            } else if (type == "el-avatar") {
                return h(ElAvatar, props, children);
            } else if (type == "el-image") {
                return h(ElImage, props, children);
            } else if (type == "chart") {
                return h(Chart, props, children);
            }

            return h(type, props, children);
        };

        watch(() => config, reloadTemplate, {
            deep: true,
            immediate: true,
        });

        return () => {
            return template.value;
        };
    },
};
